<template>
  <div class="search-wrapper">
    <bk-table
        style="margin-top: 15px;"
        :data="recordData"
        :pagination="pagination"
        @page-change="handlePageChange">
      <bk-table-column type="index" label="序号" align="center" width="60" />
      <bk-table-column label="主机ID" prop="bk_host_id" width="120" />
      <bk-table-column label="文件目录" prop="bk_file_dir" width="180" />
      <bk-table-column label="文件后缀" prop="bk_file_suffix" width="100" />
      <bk-table-column label="备份文件" prop="bk_backup_name" />
      <bk-table-column label="备份时间" prop="bk_file_create_time" width="200" />
      <bk-table-column label="备份人" prop="bk_file_operator" width="150" />
      <bk-table-column label="备份结果" prop="bk_job_link" width="100">
        <template slot-scope="{ row }">
          <a :href="row.bk_job_link" target="_blank">JOB结果</a>
        </template>
      </bk-table-column>
    </bk-table>
  </div>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {
      list: [],
      recordData: [],
      pagination: {
        current: 1,
        count: 0,
        limit: 10,
      },
    };
  },
  created() {
    this.getBackupRecord();
  },
  methods: {
    async getBackupRecord(page = 1) {
      // 分页参数
      const params = {
        page: page,
        page_size: this.pagination.limit,
      };
      const res = await this.$store.dispatch('example/getBackupRecord', params, { fromCache: true });
      // 假设后端返回 { data: { info: [...], count: 100 } }
      if (res.data.info) {
        this.recordData = res.data.info;
        this.pagination.count = res.data.count || 0;
      } else {
        this.recordData = res.data;
        this.pagination.count = res.data.length || 0;
      }
      this.pagination.current = page;
    },
    handlePageChange(page) {
      this.getBackupRecord(page);
    },
  },
}
;
</script>

<style scoped lang="postcss">
.search-wrapper {
  background: #f5f7fa;
  min-height: 100vh;
  padding: 32px 24px 24px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.bk-table {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px 0 rgba(25,25,41,0.04);
  padding: 18px;
}
.bk-table th {
  background: #f0f3fa;
  color: #63656e;
  font-weight: 600;
}
.bk-table td {
  color: #313238;
}
</style>
